Fonction CSS Light-Dark : Adaptation automatique des thèmes pour un Web mondial

Dans le monde globalement connecté d'aujourd'hui, les sites web doivent être accessibles et visuellement attrayants pour des utilisateurs d'horizons et de préférences divers. L'une des manières les plus efficaces d'y parvenir est l'adaptation automatique des thèmes, en proposant spécifiquement des thèmes clair et sombre qui s'ajustent en fonction des paramètres système de l'utilisateur. Cet article de blog vous guidera dans la mise en œuvre de cette fonctionnalité à l'aide des media queries CSS et des propriétés personnalisées, garantissant une expérience de navigation fluide et confortable pour votre public international.

Pourquoi implémenter des thèmes clair et sombre automatiques ?

Il existe plusieurs raisons convaincantes d'intégrer l'adaptation automatique des thèmes dans vos projets web :

• Expérience utilisateur améliorée : Les utilisateurs ont souvent une forte préférence pour les thèmes clairs ou sombres. Respecter leurs paramètres système leur permet de naviguer sur votre site web d'une manière qui leur semble naturelle et confortable. C'est particulièrement important pour les utilisateurs qui passent de longues heures devant les écrans, car les thèmes sombres peuvent réduire la fatigue oculaire dans les environnements peu éclairés.
• Accessibilité améliorée : Les thèmes clair et sombre peuvent améliorer considérablement l'accessibilité pour les utilisateurs malvoyants. Les modes à contraste élevé peuvent rendre le texte plus facile à lire, tandis que les thèmes sombres peuvent réduire l'éblouissement et améliorer la lisibilité pour les utilisateurs sensibles à la lumière.
• Conception web moderne : La mise en œuvre de thèmes clair et sombre démontre un engagement envers les principes de conception web modernes et une approche centrée sur l'utilisateur. Cela montre que vous vous souciez de fournir une expérience soignée et adaptable.
• Réduction de la fatigue oculaire : Particulièrement crucial pour les utilisateurs dans les régions où les heures de travail devant un ordinateur sont longues (par exemple, de nombreux pays asiatiques). Le thème sombre soulagera la fatigue de leurs yeux.
• Économie de la batterie : Sur les appareils dotés d'écrans OLED, les thèmes sombres peuvent préserver l'autonomie de la batterie en réduisant la quantité de lumière émise. C'est pertinent pour les utilisateurs du monde entier, en particulier ceux qui utilisent des appareils mobiles avec une capacité de batterie limitée.

Comment implémenter l'adaptation automatique de thème avec CSS

Le cœur de l'adaptation automatique de thème réside dans la media query prefers-color-scheme. Cette media query CSS vous permet de détecter le schéma de couleurs préféré de l'utilisateur (clair ou sombre) et d'appliquer les styles correspondants.

Étape 1 : Définir les propriétés personnalisées (variables CSS)

Commencez par définir des propriétés personnalisées (variables CSS) pour stocker les valeurs de couleur de vos thèmes clair et sombre. Cela facilite le basculement entre les thèmes en mettant simplement à jour les valeurs des variables.

            
:root {
  --background-color: #ffffff; /* Arrière-plan du thème clair */
  --text-color: #000000; /* Texte du thème clair */
  --link-color: #007bff; /* Lien du thème clair */
  --button-background-color: #f0f0f0;
  --button-text-color: #000;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #121212; /* Arrière-plan du thème sombre */
    --text-color: #ffffff; /* Texte du thème sombre */
    --link-color: #66b3ff; /* Lien du thème sombre */
    --button-background-color: #333;
    --button-text-color: #fff;
  }
}

            

              
                Copy
              
            
          

Dans cet exemple, nous définissons des variables pour la couleur de fond, la couleur du texte, la couleur des liens et les couleurs des boutons. Le sélecteur :root applique ces variables à l'ensemble du document. La media query @media (prefers-color-scheme: dark) remplace ensuite ces variables par les valeurs du thème sombre lorsque l'utilisateur a configuré son système en mode sombre.

Étape 2 : Appliquer les propriétés personnalisées à vos styles

Ensuite, appliquez ces propriétés personnalisées à vos styles CSS pour contrôler l'apparence des éléments de votre site web.

            
body {
  background-color: var(--background-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s; /* Transition en douceur */
}

a {
  color: var(--link-color);
}

button {
  background-color: var(--button-background-color);
  color: var(--button-text-color);
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

            

              
                Copy
              
            
          

Ici, nous utilisons la fonction var() pour accéder aux valeurs de nos propriétés personnalisées. Nous avons également ajouté une propriété transition à l'élément body pour créer une transition fluide entre les thèmes.

Étape 3 : Test et affinage

Testez minutieusement votre implémentation sur différents navigateurs et systèmes d'exploitation. Les navigateurs modernes comme Chrome, Firefox, Safari et Edge prennent entièrement en charge la media query prefers-color-scheme. Vous pouvez basculer entre les modes clair et sombre dans les paramètres de votre système d'exploitation pour voir les changements se refléter sur votre site web.

Techniques avancées et considérations

Fournir un sélecteur de thème manuel

Bien que l'adaptation automatique de thème soit un excellent point de départ, certains utilisateurs peuvent préférer outrepasser manuellement les paramètres de leur système. Vous pouvez fournir un sélecteur de thème manuel en utilisant JavaScript et le stockage local (local storage).

HTML :

            
Changer de thème

            

              
                Copy
              
            
          

JavaScript :

            
const themeToggle = document.getElementById('theme-toggle');
const body = document.body;

let currentTheme = localStorage.getItem('theme') || 'auto'; // Par défaut sur auto

function setTheme(theme) {
  if (theme === 'dark') {
    body.classList.add('dark-theme');
    body.classList.remove('light-theme');
  } else if (theme === 'light') {
    body.classList.add('light-theme');
    body.classList.remove('dark-theme');
  } else {
    body.classList.remove('light-theme', 'dark-theme');
  }
  localStorage.setItem('theme', theme);
  currentTheme = theme;
}

// Appliquer le thème initial au chargement de la page
if (currentTheme === 'dark') {
  setTheme('dark');
} else if (currentTheme === 'light') {
  setTheme('light');
} else {
  //Si réglé sur auto, laisser prefers-color-scheme décider
}


themeToggle.addEventListener('click', () => {
    if (currentTheme === 'auto'){
        setTheme('light');
    } else if (currentTheme === 'light') {
        setTheme('dark');
    } else {
        setTheme('auto');
    }
});


            

              
                Copy
              
            
          

CSS : Ajoutez le CSS suivant avec le CSS précédent. Notez la surcharge manuelle :

            
body.light-theme {
  --background-color: #ffffff; /* Arrière-plan du thème clair */
  --text-color: #000000; /* Texte du thème clair */
  --link-color: #007bff; /* Lien du thème clair */
  --button-background-color: #f0f0f0;
  --button-text-color: #000;
}

body.dark-theme {
  --background-color: #121212; /* Arrière-plan du thème sombre */
  --text-color: #ffffff; /* Texte du thème sombre */
  --link-color: #66b3ff; /* Lien du thème sombre */
  --button-background-color: #333;
  --button-text-color: #fff;
}

            

              
                Copy
              
            
          

Cet extrait de code ajoute un bouton qui permet aux utilisateurs de basculer entre les thèmes clair, sombre et automatique. Le thème sélectionné est stocké dans le stockage local afin qu'il persiste d'un chargement de page à l'autre.

Gérer les images et les SVG

Certaines images et SVG могут ne pas bien rendre dans les thèmes clair et sombre. Vous pouvez utiliser les media queries CSS pour afficher conditionnellement différentes versions de ces ressources.

            
img.light-mode {
  display: block;
}

img.dark-mode {
  display: none;
}

@media (prefers-color-scheme: dark) {
  img.light-mode {
    display: none;
  }

  img.dark-mode {
    display: block;
  }
}

            

              
                Copy
              
            
          

Cet extrait de code affiche une image (avec la classe light-mode) en mode clair et une autre image (avec la classe dark-mode) en mode sombre.

Considérations sur la palette de couleurs pour les publics internationaux

Lorsque vous choisissez des palettes de couleurs pour vos thèmes clair et sombre, soyez conscient des associations culturelles et des considérations d'accessibilité. Voici quelques directives générales :

• Contraste : Assurez un contraste suffisant entre les couleurs du texte et de l'arrière-plan pour respecter les normes d'accessibilité (WCAG). Utilisez des outils comme le Vérificateur de contraste de WebAIM pour vérifier les rapports de contraste.
• Daltonisme : Tenez compte de l'impact de vos choix de couleurs sur les utilisateurs daltoniens. Utilisez des outils comme le Simulateur de daltonisme pour prévisualiser votre site web tel que le voient les personnes atteintes de différents types de daltonisme.
• Associations culturelles : Sachez que les couleurs peuvent avoir des associations culturelles différentes dans diverses parties du monde. Par exemple, le blanc est souvent associé à la pureté et au deuil dans certaines cultures, tandis que le rouge est associé à la chance et à la prospérité dans d'autres. Faites des recherches sur les associations culturelles pour éviter d'offenser ou de semer la confusion involontairement.
• Palettes neutres : En cas de doute, optez pour des palettes de couleurs neutres qui sont moins susceptibles d'être mal interprétées ou offensantes. Les gris, les beiges et les tons sourds peuvent être un choix sûr et polyvalent.
• Tests utilisateurs : Menez des tests utilisateurs avec un groupe diversifié de participants pour recueillir des commentaires sur vos choix de couleurs et vous assurer qu'ils sont perçus positivement par votre public cible.
• Localisation : Dans la mesure du possible, envisagez d'utiliser des palettes de couleurs localisées qui sont adaptées aux préférences culturelles de régions ou de pays spécifiques. Cela peut impliquer d'ajuster les teintes, la saturation et la luminosité des couleurs pour s'aligner sur les goûts locaux.

Considérations sur les performances

Bien que la mise en œuvre de l'adaptation automatique des thèmes soit relativement simple, il est important de tenir compte de l'impact potentiel sur les performances. Évitez d'utiliser des sélecteurs CSS ou des animations trop complexes qui peuvent ralentir le rendu. Assurez-vous également que vos propriétés personnalisées sont définies efficacement pour minimiser la surcharge liée à la recherche de variables.

Voici quelques bonnes pratiques pour optimiser les performances :

• Gardez les sélecteurs CSS simples : Évitez d'utiliser des sélecteurs CSS trop spécifiques ou imbriqués, car ils peuvent augmenter le temps nécessaire au navigateur pour faire correspondre les styles aux éléments.
• Utilisez les propriétés personnalisées CSS avec discernement : Bien que les propriétés personnalisées soient puissantes, une utilisation excessive peut avoir un impact sur les performances. Utilisez-les de manière stratégique pour les valeurs qui changent fréquemment ou qui sont partagées entre plusieurs éléments.
• Minimisez les animations inutiles : Les animations peuvent ajouter un attrait visuel à votre site web, mais elles peuvent également avoir un impact sur les performances si elles ne sont pas mises en œuvre avec soin. Utilisez les transitions et animations CSS avec parcimonie et optimisez-les pour un rendu fluide.
• Testez sur des appareils réels : Testez toujours votre site web sur des appareils réels avec des conditions de réseau et des capacités matérielles variables pour identifier les goulots d'étranglement potentiels en matière de performances. Utilisez les outils de développement du navigateur pour profiler les performances de votre site web et identifier les domaines à améliorer.

Bonnes pratiques d'accessibilité

Assurez-vous que vos thèmes clair et sombre respectent les directives d'accessibilité, telles que les WCAG (Web Content Accessibility Guidelines). Cela inclut de fournir un contraste de couleurs suffisant, d'utiliser du HTML sémantique et de s'assurer que tous les éléments interactifs sont accessibles au clavier.

Voici quelques bonnes pratiques d'accessibilité spécifiques à suivre :

• Contraste de couleurs suffisant : Assurez-vous que le rapport de contraste entre les couleurs du texte et de l'arrière-plan respecte les normes WCAG 2.1 AA (4.5:1 pour le texte normal, 3:1 pour le grand texte). Utilisez des outils comme le Vérificateur de contraste de WebAIM pour vérifier les rapports de contraste.
• HTML sémantique : Utilisez des éléments HTML sémantiques (par ex., <header>, <nav>, <article>, <aside>, <footer>) pour structurer votre contenu de manière logique. Cela aide les lecteurs d'écran et autres technologies d'assistance à comprendre le contenu et à naviguer efficacement sur la page.
• Accessibilité au clavier : Assurez-vous que tous les éléments interactifs (par ex., liens, boutons, champs de formulaire) sont accessibles au clavier. Utilisez l'attribut tabindex pour contrôler l'ordre de tabulation et fournir des indices visuels pour indiquer quel élément a le focus.
• Attributs ARIA : Utilisez les attributs ARIA (Accessible Rich Internet Applications) pour fournir des informations supplémentaires sur la structure et la fonctionnalité de votre application web aux technologies d'assistance. Par exemple, utilisez aria-label pour fournir une étiquette descriptive à un élément, ou aria-hidden pour masquer un élément des lecteurs d'écran.
• Tests avec des technologies d'assistance : Testez votre site web avec des lecteurs d'écran et d'autres technologies d'assistance pour identifier les problèmes d'accessibilité potentiels. Utilisez des outils comme NVDA (NonVisual Desktop Access) ou VoiceOver pour faire l'expérience de votre site web comme un utilisateur malvoyant.
• Fournir un texte alternatif pour les images : Utilisez l'attribut alt pour fournir un texte alternatif descriptif pour toutes les images. Ce texte sera affiché si l'image ne peut pas être chargée, et il sera également lu par les lecteurs d'écran.

Exemples dans différentes régions

Considérez ces exemples de la manière dont les thèmes clair et sombre peuvent être adaptés à divers publics mondiaux :

• Asie de l'Est : Dans de nombreuses cultures d'Asie de l'Est, le blanc est associé au deuil. Lors de la conception d'un thème sombre pour ces régions, évitez d'utiliser un texte blanc excessif sur un fond noir. Optez plutôt pour un texte blanc cassé ou gris clair.
• Moyen-Orient : Dans certaines cultures du Moyen-Orient, les couleurs vives sont souvent préférées. Lors de la conception d'un thème clair, envisagez d'utiliser des couleurs d'accentuation vibrantes pour ajouter un intérêt visuel. Assurez-vous cependant que les choix de couleurs ne heurtent pas les sensibilités culturelles.
• Europe : En Europe, les designs minimalistes sont souvent privilégiés. Lors de la conception des thèmes clair et sombre, optez pour des mises en page épurées, une typographie simple et des palettes de couleurs subtiles.
• Amérique latine : En Amérique latine, les designs audacieux et expressifs sont souvent appréciés. Lors de la conception des thèmes clair et sombre, envisagez d'utiliser une typographie ludique, des couleurs vives et des animations dynamiques.
• Afrique : En raison des vitesses Internet et des capacités des appareils variables, donnez la priorité aux performances et à l'accessibilité. Utilisez des éléments de conception plus simples et testez sur des connexions plus lentes.

Conclusion

La mise en œuvre de thèmes clair et sombre automatiques est une étape cruciale vers la création d'une expérience web plus accessible et conviviale pour un public mondial. En tirant parti des media queries CSS et des propriétés personnalisées, vous pouvez facilement adapter l'apparence de votre site web pour correspondre aux préférences de l'utilisateur, réduire la fatigue oculaire et améliorer l'accessibilité pour les utilisateurs malvoyants. N'oubliez pas de tenir compte des associations culturelles, des directives d'accessibilité et des considérations de performance pour garantir une expérience de navigation fluide et inclusive pour tous.

En adoptant ces techniques, vous démontrez un engagement envers les principes de conception web modernes et répondez aux divers besoins de votre public international, faisant de votre site web un espace accueillant et confortable pour tous.